.schedule {
  max-width: 100%;
  overflow-x: hidden;
  padding: 50px 0 140px 0;
  .container {
    max-width: $min-container;
    position: relative;
    margin-top: 120px;
  }
  .status-bar {
    background: linear-gradient(90deg, $light-blue, $dark-blue);
    height: 20px;
    border-radius: 20px;
    @include zIndexShadow(1);
    &:before {
      content: '';
      display: block;
      background-color: $color-brown;
    }
    &:before {
      width: 99%;
      height: 7px;
      position: relative;
      top: 6.3px;
      left: 5px;
      border-radius: 5px;
      z-index: 2;
    }
  }
  .item {
    position: absolute;
    transform: translateX(-50%);
    text-align: center;
    top: 0;
    width: 145px;
    .desc {
      position: relative;
      top: -65px;
      font-size: 1rem;
      font-weight: bold;
      color: #777;
      display: inline-block;
      padding: 7px 20px;
      span {
        position: relative;
        z-index: 2;
      }
    }
    .date {
      position: relative;
      bottom: -30px;
      font-size: 1rem;
      color: #777;
    }
    &:after {
      content: '';
      width: 35px;
      height: 35px;
      display: block;
      background-color: $dark-blue;
      border-radius: 50%;
      position: absolute;
      top: -8px;
      left: 55px;
    }
    &.first {
      left: 20%;
      &:after {
        background-color: #1C3061;
      }
      &.on:after {
        background-color: $color-brown;
        border: 6px solid #1c3061;
      }
    }
    &.second {
      left: 40%;
      &:after {
        background-color: #172953;
      }
      &.on:after {
        border: 6px solid #172953;
        background-color: $color-brown;
      }
    }
    &.third {
      left: 60%;
      &:after {
        background-color: #122246;
      }
      &.on:after {
        border: 6px solid #122246;
        background-color: $color-brown;
      }
    }
    &.fourth {
      left: 80%;
      &:after {
        background-color: #0D1B39;
      }
      &.on:after {
        border: 6px solid #0D1B39;
        background-color: $color-brown;
      }
    }
    &.now {
      .date {
        color: $color-brown;
      }
      .desc {
        box-shadow: 0 3px 17px 0 rgba(0,0,0,0.2);
        color: #fff;
        background-color: $color-brown;
        &:after {
          content: '';
          display: block;
          width: 20px;
          height: 20px;
          background-color: $color-brown;
          position: absolute;
          margin-left: 6px;
          margin-top: -5px;
          transform: rotate(45deg);
        }
      }
    }
  } // .item end
}
